<template>
    <view class="group-select" v-if="showDrawer">
        <view class="mark" @click="closeFuc"></view>
        <view class="drawer">
            <view class="down" @click="closeFuc">
                <view class="down-btn"></view>
            </view>
            <view class="drawer-search">
                <image class="left-icon" src="@/static/images/search_black.png"> </image>
                <input v-model="keywords" @input="searchFuc" placeholder="请输入电梯关键字" placeholder-style="color:#ccc" />
                <view class="clear" @click.stop="clearKeywords" v-if="keywords.length">
                    <uni-icons color="#999999" type="clear" />
                </view>
            </view>
            <view class="base-line"></view>
            <view class="drawer-content">
                <view class="tabs">
                    <view :class="['tabs-item', tabIdx == 2 ? 'act' : '']" @click="changeTab(2)"
                        v-if="findRoute('depart_elevator')">部门管理电梯
                        <text class="redCircle" v-if="selectDiv"></text>
                    </view>
                    <view :class="['tabs-item', tabIdx == 1 ? 'act' : '']" @click="changeTab(1)"
                        v-if="findRoute('personal_elevator')">个人管理电梯
                        <text class="redCircle" v-if="selectPerson"></text>
                    </view>
                </view>
                <view class="approveStatus" v-if="tabIdx == 1">
                    <view :class="[statusActive === 0 ? 'apptop active' : 'apptop']" @click="changeStatus(0)">全部
                        <text class="redCircle" style="top: 0;right: 0;" v-if="selectAll"></text>
                    </view>
                    <view :class="[statusActive === 1 ? 'apptop active' : 'apptop']" @click="changeStatus(1)">责任电梯
                        <text class="redCircle" style="top: 0;right: 0;" v-if="select"></text>
                    </view>
                </view>

                <view v-if="tree.length" style="padding: 30rpx 30rpx 0 50rpx;height: 720rpx;overflow-y: scroll;">
                    <!-- <groupTree :keywords="keywords" :selectType="selectType" v-for="item in tree" :selectIds="selectIds"
                        :selectGroup="selectGroup" :item="item" :key="item.id" :defaultProps="defaultProps"></groupTree> -->
                    <view class="head" style="margin: 0 0 20rpx 10rpx;" v-if="tree && tree.length > 0">
                        <view class="txt" @click.stop="chooseItemAll">
                            <uni-icons v-if="(allSelect && !halfState) || allSelect" color="#0091ff" size="18"
                                style="margin-right:4rpx" type="checkbox-filled" />
                            <uni-icons v-if="!allSelect && halfState" color="#0091ff" size="18" style="margin-right:4rpx"
                                type="minus-filled" />
                            <uni-icons v-if="!allSelect && !halfState" color="#ccc" size="18" style="margin-right:4rpx"
                                type="circle" />
                            <text>全选</text>
                        </view>
                    </view>
                    <view class="group-tree-item" v-for="(item, index) in tree" :key="index"
                        :style="item.id ? '' : 'margin-bottom:16rpx'">
                        <view class="head">
                            <view class="txt" @click.stop="chooseItem(item, index)">
                                <uni-icons v-if="item.choosed" color="#0091ff" size="17" style="margin-right:4rpx"
                                    type="checkbox-filled" />
                                <uni-icons v-if="!item.choosed" color="#ccc" size="17" style="margin-right:4rpx"
                                    type="circle" />
                                <text v-for="(txt, tidx) in item.elevatorAddress.split('')" :key="tidx"
                                    :style="keywords && tidx >= highs(item.elevatorAddress)[0] && tidx <= highs(item.elevatorAddress)[1] ? 'color:#0091FF' : ''">
                                    {{ txt }}
                                </text>
                                <!-- <text>{{ item.label }}</text> -->
                            </view>
                        </view>
                    </view>
                </view>
                <view v-else class="empty">
                    <view class="circle">
                        <image src="@/static/images/emptyS.png"></image>
                    </view>
                    <view class="title">
                       {{keywords?'暂无搜索数据':'暂无数据'}} 
                    </view>
                </view>
            </view>
            <view class="footer-btns">
                <view class="reSet" @click.stop="handleReset">重置</view>
                <view class="submit" @click.stop="submit"> 确定 <text v-if="selectArr.length">(已选{{
                    selectArr.length
                }}{{ selectType == 1 ? '人' : '个部门' }})</text> </view>
            </view>
        </view>

    </view>
</template>
<script>
import { getMembers, getGroups } from '@/apis/building.js';
export default {
	data() {
		return {
			showDrawer: false,
			focusState: false, // 默认不获取焦点
			keywords: '',
			tree: [],// 当前展示的树
			data: [],// 数据源
			selectIds: [],
			selectGroup: '',
			seletNull: false,// 是否选中未设置责任人,

			selectType: 1,// 类型：1人或2部门
			selectArr: [],// 选中id列表

			choosed: [],
			choosed2: [],
			choosed3: [],

			tabIdx: 2,
			statusActive: 0,
			halfState: false,
			allSelect: false,

			selectDiv: false,
			selectPerson: false,
			selectAll: false,
			select: false,
		};
	},

	props: {
		depElevatorList: {
			type: Array,
			default: ()=>[]
		}

	},
	watch: {
		depElevatorList(val) {
			this.halfState = val.some(item => item.choosed);
			this.allSelect = val.every(item => item.choosed);
			this.tree = val;
			this.data = val;
		}
	},
	computed: {
		// highs() {
		//     if (!this.keywords) {
		//         return [-1, -1]
		//     }
		//     let idx = '', txt = ''
		//     for (let i = 0; i < this.tree.length; i++) {
		//         txt = this.tree[i].elevatorAddress || ''
		//         idx = txt.indexOf(this.keywords)
		//         return idx == -1 ? [-1, -1] : [idx, idx + this.keywords.length - 1]
		//     }
		// },

	},
	created() {
		this.selectArr = [];
		if (this.findRoute('depart_elevator')) {
			this.tabIdx = 2;
		} else if (this.findRoute('personal_elevator')) {
			this.tabIdx = 1;
		}
	},
	methods: {
		highs(item) {
			if (!this.keywords) {
				return [-1, -1];
			}
			let idx = item.indexOf(this.keywords);
			return idx == -1 ? [-1, -1] : [idx, idx + this.keywords.length - 1];
		},
		changeTab(idx) {
			if (this.tabIdx == idx) return;
			this.tabIdx = idx;
			this.keywords = '';
			this.allSelect = false;
			this.halfState = false;
			this.statusActive = 0;
			this.$emit('changeTab', idx);
		},
		changeStatus(index) {
			if (this.statusActive == index) return;
			this.statusActive = index;
			this.allSelect = false;
			this.halfState = false;
			this.keywords = '';
			this.$emit('changeStatus', index);
		},

		closeFuc() {
			this.showDrawer = false;
			// this.allSelect = false
			// this.halfState = false
			// this.handleReset()
			this.$nextTick(() => {
				if (this.findRoute('depart_elevator')) {
					this.tabIdx = 2;
				} else if (this.findRoute('personal_elevator')) {
					this.tabIdx = 1;
				}
				this.statusActive = 0;
			});
			this.$emit('closedSele', false);
		},
		chooseItemAll() {
			this.allSelect = !this.allSelect;
			this.halfState = false;
			if (this.allSelect) {
				this.tree.map(item => item.choosed = true);
				if (this.tabIdx == 2) {
					this.choosed.push(...this.tree);
				}
				if (this.tabIdx == 1 && this.statusActive == 0) {
					this.choosed2.push(...this.tree);
				} if (this.tabIdx == 1 && this.statusActive == 1) {
					this.choosed3.push(...this.tree);
				}
			} else {
				this.tree.forEach(item => {
					item.choosed = false;
					if (this.tabIdx == 2) {
						this.choosed.forEach((it, idx) => {
							if (it.elevatorId == item.elevatorId) {
								this.choosed.splice(idx, 1);
							}
						});
					}
					if (this.tabIdx == 1 && this.statusActive == 0) {
						this.choosed2.forEach((it, idx) => {
							if (it.elevatorId == item.elevatorId) {
								this.choosed2.splice(idx, 1);
							}
						});
					} if (this.tabIdx == 1 && this.statusActive == 1) {
						this.choosed3.forEach((it, idx) => {
							if (it.elevatorId == item.elevatorId) {
								this.choosed3.splice(idx, 1);
							}
						});
					}
				});
			}
			let person = this.tree.some(it => it.choosed);
			if (this.tabIdx == 2) {
				if (person) {
					this.selectDiv = true;
				} else {
					this.selectDiv = false;
				}
				this.$emit('chooseItem', {
					choosed: this.choosed,
					tabIdx: this.tabIdx,
					statusActive: this.statusActive
				});
			}
			if (this.tabIdx == 1 && this.statusActive == 0) {
				if (person) {
					this.selectAll = true;
				} else {
					this.selectAll = false;
				}
				this.$emit('chooseItem', {
					choosed: this.choosed2,
					tabIdx: this.tabIdx,
					statusActive: this.statusActive
				});
			}
			if (this.tabIdx == 1 && this.statusActive == 1) {
				if (person) {
					this.select = true;
				} else {
					this.select = false;
				}
				this.$emit('chooseItem', {
					choosed: this.choosed3,
					tabIdx: this.tabIdx,
					statusActive: this.statusActive
				});
			}
			if (this.selectAll || this.select) {
				this.selectPerson = true;
			} else {
				this.selectPerson = false;
			}
			this.$forceUpdate();
		},
		// 选择梯
		chooseItem(obj, index) {
			let tree = this.tree;
			for (let i = 0; i < tree.length; i++) {
				if (index === i) {
					tree[i].choosed = !tree[i].choosed;
				}
			}
			if (obj.choosed) {
				if (this.tabIdx == 2) {
					this.choosed.push(obj);
				}
				if (this.tabIdx == 1 && this.statusActive == 0) {
					this.choosed2.push(obj);
				} if (this.tabIdx == 1 && this.statusActive == 1) {
					this.choosed3.push(obj);
				}
			} else {
				if (this.tabIdx == 2) {
					this.choosed.forEach((it, idx) => {
						if (it.elevatorId == obj.elevatorId) {
							this.choosed.splice(idx, 1);
						}
					});
				}
				if (this.tabIdx == 1 && this.statusActive == 0) {
					this.choosed2.forEach((it, idx) => {
						if (it.elevatorId == obj.elevatorId) {
							this.choosed2.splice(idx, 1);
						}
					});
				} if (this.tabIdx == 1 && this.statusActive == 1) {
					this.choosed3.forEach((it, idx) => {
						if (it.elevatorId == obj.elevatorId) {
							this.choosed3.splice(idx, 1);
						}
					});
				}
			}
			let person = this.tree.some(it => it.choosed);
			if (this.tabIdx == 2) {
				if (person) {
					this.selectDiv = true;
				} else {
					this.selectDiv = false;
				}
				this.$emit('chooseItem', {
					choosed: this.choosed,
					tabIdx: this.tabIdx,
					statusActive: this.statusActive
				});
			}
			if (this.tabIdx == 1 && this.statusActive == 0) {
				if (person) {
					this.selectAll = true;
				} else {
					this.selectAll = false;
				}
				this.$emit('chooseItem', {
					choosed: this.choosed2,
					tabIdx: this.tabIdx,
					statusActive: this.statusActive
				});
			}
			if (this.tabIdx == 1 && this.statusActive == 1) {
				if (person) {
					this.select = true;
				} else {
					this.select = false;
				}
				this.$emit('chooseItem', {
					choosed: this.choosed3,
					tabIdx: this.tabIdx,
					statusActive: this.statusActive
				});
			}
			if (this.selectAll || this.select) {
				this.selectPerson = true;
			} else {
				this.selectPerson = false;
			}
			this.halfState = this.tree.some(item => item.choosed);
			this.allSelect = this.tree.every(item => item.choosed);
			this.$forceUpdate();
		},
		// 完成
		submit() {
			const res = new Map();
			let selectIds = [...this.choosed, ...this.choosed2, ...this.choosed3];
			let selectArr = selectIds.filter((item) => !res.has(item.elevatorId) && res.set(item.elevatorId, 1));
			this.$emit('submit', {
				selectArr
			});
			this.showDrawer = false;
			this.$nextTick(() => {
				if (this.findRoute('depart_elevator')) {
					this.tabIdx = 2;
				} else if (this.findRoute('personal_elevator')) {
					this.tabIdx = 1;
				}
				this.statusActive = 0;
			});
		},
		// 初始化数据
		initData(res) {
			// this.selectType = res.selectType
			// this.selectArr = JSON.parse(JSON.stringify(res.selectArr || '[]'))
			// this.selectArr= ["1411852793154682881" ,"1524710724538531841"]
			// this.seletNull = res.seletNull
			this.keywords = '';
			this.data = this.depElevatorList;
			this.tree = this.depElevatorList;
			// this.getList()
			this.showDrawer = true; 
		},

		clearKeywords() {
			this.keywords = '';
			this.searchFuc({
				detail: {
					value: ''
				}
			});
		},
		// 重置
		handleReset() {
			this.keywords = '';
			// 当前tab重置
			// if (this.tabIdx == 2) {
			//     this.selectDiv = false
			//     this.choosed = []
			// }
			// if (this.tabIdx == 1 && this.statusActive == 0) {
			//     this.selectAll = false
			//     this.choosed2 = []
			// }
			// if (this.tabIdx == 1 && this.statusActive == 1) {
			//     this.select = false
			//     this.choosed3 = []
			// }
			// if (!this.selectAll && !this.select) {
			//     this.selectPerson = false
			// }

			// 所有tab 重置
			this.selectDiv = false;
			this.selectAll = false;
			this.select = false;
			this.selectPerson = false;
			this.choosed3 = [];
			this.choosed2 = [];
			this.choosed = [];

			this.allSelect = false;
			this.halfState = false;

			this.$emit('chooseItem', {
				choosed: [],
				tabIdx: this.tabIdx,
				statusActive: this.statusActive,
				clearAll: 1
			});
			// this.tree = JSON.parse(JSON.stringify(this.data))
			this.tree.map(item => item.choosed = false);
		},
		// 搜索
		searchFuc(res) {
			let arr = [];
			this.data.map(item => {
				if (res.detail.value && item.elevatorAddress.indexOf(res.detail.value) != -1) {
					arr.push({ ...item });
				}
			});
			if (res.detail.value) {
				this.tree = arr.length ? arr : '';
			} else {
				this.tree = arr.length ? arr : this.data;
			}
		},

		getList() {
			uni.showLoading({
				title: '加载中'
			});
			uni.hideLoading();
		}
	},
};
</script>
<style lang="scss" scoped>
@keyframes scaleFrames {
    from {
        transform: translateY(110%);
    }

    to {
        transform: translateY(0);
    }
}

.mark {
    width: 100%;
    height: 100vh;
    z-index: 301;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.17);
}

.drawer {
    z-index: 302;
    width: calc(100%);
    margin: 0 auto;
    background-color: #fff;
    border-top-right-radius: 8rpx;
    border-top-left-radius: 8rpx;
    animation: scaleFrames 0.3s ease;
    padding-top: 0rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    letter-spacing: 0.1rpx;

    // padding-bottom: 10rpx;
    // overflow-y: auto;
    .down {
        width: 100%;
        padding: 18rpx 0;

        .down-btn {
            width: 64rpx;
            height: 10rpx;
            background: #d8d8d8;
            border-radius: 6rpx;
            margin: 0 auto;
        }
    }

    &-search {
        width: 710rpx;
        height: 68rpx;
        background: #f6f6f6;
        border-radius: 8rpx;
        margin: 6rpx auto;
        display: flex;
        align-items: center;
        color: #333;

        .left-icon {
            width: 40rpx;
            height: 40rpx;
            padding: 16rpx;
        }

        input {
            flex: 1;
            font-size: 26rpx;
        }

        .clear {
            font-size: 24rpx;
            padding: 16rpx;
        }
    }

    .base-line {
        width: 100%;
        height: 18rpx;
        background-color: #fff;
        // border-bottom: 16rpx solid #f3f6f8;
    }

    &-content {
        width: 100%;
        height: 828rpx;
        overflow-x: hidden;
        overflow-y: scroll;
        background-color: #fff;

        &-title {
            width: calc(100% - 20rpx);
            height: 64rpx;
            line-height: 64rpx;
            background: #f3f6f8;
            color: #666666;
            font-size: 24rpx;
            padding-left: 20rpx;
        }

    }

    .empty {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 100rpx;

        .circle {
            width: 112rpx;
            height: 112rpx;
        }

        image {
            width: 112rpx;
            height: 112rpx;
        }

        .title {
            font-size: 26rpx;
            color: #666;
            font-weight: normal;
            margin-top: 10rpx;
        }
    }
}

.tabs {
    display: flex;
    align-items: flex-end;
    border-bottom: 2rpx solid #eeeeee;
    height: 74rpx;

    &-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .3s all;
        color: #93b1c7;
        font-size: 26rpx;
        border-bottom: 4rpx solid #ffffff;
        margin: 0 20rpx;
        padding: 16rpx 0;

    }

    .act {
        border-color: #0091ff;
        color: #0091ff;
        font-size: 30rpx;
        font-weight: bold;
    }

}

.approveStatus {
    // height: 88rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: row;
    // overflow-x: scroll;
    width: 100%;
    white-space: nowrap;
    // position: relative;
    // border-bottom: 2rpx #eee solid;

    .apptop {
        position: relative;
        font-size: 26rpx;
        padding: 6rpx 20rpx;
        color: #666;
        margin-right: 15rpx;
        border-radius: 26rpx;
        background-color: #f3f6f8;

    }

    .active {
        color: #0091FF;
        background-color: #dcf0ff;
    }
}

.footer-btns {
    display: flex;
    padding: 20rpx 38rpx;
    border-top: 2rpx #eee solid;

    view {
        display: flex;
        flex: 1;
        height: 70rpx;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
    }

    .reSet {
        background-color: #f5fbff;
        color: #0091ff;
        // margin-right: 10rpx;
        border-top-left-radius: 8rpx;
        border-bottom-left-radius: 8rpx;
    }

    .submit {
        // width: 100%;
        // text-align: center;
        border-top-right-radius: 8rpx;
        border-bottom-right-radius: 8rpx;
        background-color: $theme-color;
        color: #fff;
    }
}

@mixin animate2 {
    -moz-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.redCircle {
    width: 6px;
    height: 6px;
    background: #e02020;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    right: -5px;
}

.group-tree-item {
    padding: 10rpx 0rpx;
    padding-left: 10rpx;
    background-color: #fff;

    .head {
        display: flex;
        align-items: center;
        line-height: 60rpx;

        .txt {
            font-size: 28rpx;
            color: #333;

            // flex: 1;
            .textColor {
                color: #333;
            }

            .textColorTwo {
                color: #999;
            }

            .textColorOne {
                color: #0091FF;
            }
        }
    }

    .right-ifon {
        margin-right: 30rpx;
        width: 30rpx;
        height: 30rpx;
        margin-left: 12rpx;
        transform: rotate(-90deg);
    }

    .left-icon {
        margin-right: 10rpx;
        width: 20rpx;
        height: 20rpx;
        @include animate2;
        transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);

        &.rt45 {
            transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
        }
    }

    .content {
        padding-left: 40rpx;
    }
}
</style>